<template>
  <div class ="home">
    <el-container>
            <el-container>
            <el-main>
             <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>基地信息</span>
                </div>
              <div class = "list">
              <h1 style="margin-bottom:20px;">名称: {{data.baseName}}</h1>
              <p>地址: {{data.address}}</p>
              <p v-if = "data.baseType=='social_practice'">类型: 社会实践基地</p>
              <p v-if = "data.baseType=='research_base'">类型: 研学实践基地</p>
              <p v-if = "data.baseType=='research_camp'">类型: 研学实践营地</p>
              <p>ID: {{data.baseId}}</p>
              <div class = "grade">
                <label>综合评分: </label>
                <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
              </div>
              <div class = "number">
              <span>学生评价数量:</span>
              <span @click = "routerEvaluate" style="text-decoration:underline;cursor:pointer;">{{ data.commentCount}}</span>
              </div>
              </div>
              </el-card>
            </el-main>
            </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data:{},
      value:0
    }
  },
  created() {
    this.Base()
  },
  methods: {
    Base(){
      let baseId = JSON.parse(sessionStorage.getItem('user')).baseId
      this.$api.Basemanager.baseInformation(baseId).then(res => {
        this.data = res.data
        this.value = res.data.commentAverage / 2
      }).catch(err => {
        console.log(err)
      })
    },
    routerEvaluate(){
      this.$router.push('./practice')
    },
  }
}
</script>
<style scoped>
@import '../assets/icon.css';
  .home .list p{
    margin-bottom:20px;
  }
  .home .grade{
    display: flex;
    margin-bottom: 20px;
  }
  .home .grade label{
    line-height: 20px;
  }
  .home .number{
    display: flex;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
    height:400px;
  }
</style>
